@import "../styles/item-box.scss";

@mixin cloud-left($top, $left, $time) {
  position: fixed;
  top: $top;
  left: $left;
  z-index: -1;
  animation: cloud-move-left $time alternate infinite;
}

@mixin cloud-right($top, $left, $time) {
  position: fixed;
  top: $top;
  left: $left;
  z-index: -1;
  animation: cloud-move-right $time alternate infinite;
}

.cure-room {
  background: linear-gradient(rgb(255, 217, 200), rgb(255, 146, 96));
  padding: 1vh 10vh;
  height: 100%;
  transition: background-color 3s;

  .room-side0 {
    display: flex;
    height: 100%;

    .left-side {
      @include item-box(25%, 100%, rgba(128, 255, 0, 0));
    }

    .right-side {
      @include item-box(75%, 100%, rgba(128, 255, 0, 0));
      .top {
        display: flex;
        .top-left {
          @include item-box(75%, 33%, rgba(0, 162, 255, 0));
        }

        .top-right {
          @include item-box(25%, 33%, rgba(0, 49, 78, 0));
        }
      }

      .middle {
        display: flex;
        .middle-left {
          @include item-box(30%, 25vh, rgba(255, 102, 0, 0));
        }

        .middle-right {
          @include item-box(70%, 25vh, rgba(78, 0, 55, 0));
        }
      }

      .bottom {
        display: flex;
        .bottom-left {
          @include item-box(50%, 20vh, rgba(126, 255, 158, 0));
        }

        .bottom-right {
          @include item-box(50%, 20vh, rgba(255, 231, 95, 0));
        }
      }
    }
  }

  .room-side1 {
    display: flex;
    height: 100%;
    .left-side {
      @include item-box(20%, 100%, transparent);
    }

    .middle-side {
      @include item-box(50%, 100%, transparent);

      .top {
        display: flex;
        @include item-box(100%, 33%, transparent);
      }

      .middle {
        display: flex;
        @include item-box(50%, 33%, rgba(0, 0, 0, 0));

      }
    }

    .right-side {
      @include item-box(20%, 33%, transparent);
    }
  }

  .room-side2 {
    display: flex;
    height: 100%;

    .left-side {
      @include item-box(40%, 100%, rgb(255, 255, 255));
    }

    .middle-side {
      @include item-box(33%, 100%, rgb(255, 255, 255));
    }

    .right-side {
      @include item-box(20%, 100%, rgba(104, 74, 74, 0));
    }
  }

  .background-pattern {
    position: fixed;
    top: 0;
    left: 0;

    .cloud0 {
      @include cloud-right(40%, 150%, 130s);
    }

    .cloud1 {
      @include cloud-left(20%, -50%, 100s);
    }

    .cloud2 {
      @include cloud-right(40%, 130%, 130s);
    }

    .cloud3 {
      @include cloud-left(30%, -40%, 145s);
    }

    .cloud4 {
      @include cloud-right(35%, 120%, 140s);
    }

    .cloud5 {
      @include cloud-left(10%, -5%, 140s);
    }

    .cloud6 {
      @include cloud-right(45%, 180%, 230s);
    }

    .cloud7 {
      @include cloud-left(50%, -25%, 200s);
    }

    .cloud8 {
      @include cloud-right(35%, 200%, 230s);
    }

    .cloud9 {
      @include cloud-left(5%, -45%, 245s);
    }

    .cloud10 {
      @include cloud-right(25%, 100%, 240s);
    }

    .cloud11 {
      @include cloud-left(15%, -5%, 240s);
    }
  }
}



@keyframes cloud-move-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(2500px);
  }
}

@keyframes cloud-move-right {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-2500px);
  }
}
